<template>
  <div class="home">
    <div class="title">飞 鸽</div>
    <div style="margin-top: 50px">
      <div>
        <el-upload
          class="avatar-uploader"
          action="http://localhost:8080/upload"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div style="margin-top: 8px">
          <el-input
            ref="nameInput"
            v-model="userName"
            :maxlength="10"
            v-if="nameShow"
            placeholder="用户名"
            class="name_input"
            @blur="shi()"
          ></el-input>
          <div v-show="!nameShow" @click="updateName">
            {{ userName }}
          </div>
        </div>
      </div>

      <div class="button_con">
        <el-input
          v-model="roomId"
          placeholder="6位房间号"
          :maxlength="6"
        ></el-input>
        <el-button plain class="create_button" @click="createRoom"
          >创建房间</el-button
        >
      </div>
    </div>
    <div class="bottom">
      <div>我们不存储消息,只是消息的搬运工</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      imageUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      userName: "sdsd",
      nameShow: false,
      roomId: "",
    };
  },
  watch: {
    roomId: function (val) {
      if (val.length == 6) {
        this.sureRoom();
      }
    },
    userName: function (val) {
      this.$root.userName = val;
    },
    imageUrl: function (val) {
      this.$root.imageUrl = val;
      console.log( this.$root.imageUrl )
    },
  },
  created() {
    this.imageUrl = this.$root.imageUrl;
    this.userName = this.$root.userName;
  },
  methods: {
    createRoom() {
      this.$root.isOpen = true;
      this.$router.replace("/chat");
    },
    sureRoom() {
      console.log(this.$root.baseUrl);
      this.axios
        .post(this.$root.baseUrl + "sureRoom/" + this.roomId)
        .then((res) => {
          if (res.data.flag != 200) {
            this.$message.error(res.data.message);
          } else {
            if (res.data.data) {
              this.$root.isOpen = true;
              this.$router.replace("/join/"+this.roomId)
            } else {
              this.$message({
                message: "无此房间",
                type: "warning",
              });
            }
          }
        })
        .catch((err) => {
          console.error(err);
        });
    },
    updateName() {
      this.nameShow = true;
      this.$nextTick(function () {
        //DOM 更新了
        console.log(this.$refs.nameInput);
        this.$refs.nameInput.focus();
      });
    },
    shi() {
      console.log("sdfsf");
      this.nameShow = false;
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = res.data;
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
  },
};
</script>
<style scoped>
.name_input {
  width: 40%;
  margin: 0 auto;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 50px;
  height: 50px;
  line-height: 50px;
  text-align: center;
}
.avatar {
  width: 50px;
  height: 50px;
  display: block;
}
.home {
  padding: 20px;
}
.title {
  font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
  font-size: 48px;
  font-weight: bold;
  margin-top: 61px;
}
.user_name {
  font-size: 20px;
}
.button_con {
  margin: 0 72px;
  margin-top: 70px;
}
.create_button {
  width: 100%;
  height: 40px;
  margin-top: 50px;
}
.bottom {
  border-radius: 50% 50% 0 0;
  height: 100px;
  background: skyblue;
  position: fixed;
  bottom: -80px;
  width: 100%;
}
.bottom > div {
  margin-top: -30px;
  font-size: 12px;
}
</style>